<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
        	 perspective: 1000px;
        }
		section {
			width: 250px;
			height: 180px;
			background: url(images/2000949.jpg) no-repeat;
			background-size: cover;
            margin: 100px auto;
            position: relative;
            /* transform: translateZ(400px); */
			transition: all 3s linear;
			transform-style: preserve-3d;

		}
		
		section:hover {
			transform: rotateY(360deg);
		}
		section div{
			width: 100%;
			height: 100%;
			background:  url(images/1.jpg) 0 0 no-repeat;
			background-size: cover;
			position: absolute;
			top: 0;
			left: 0;

		}	
		section div:nth-child(1) {
			transform: rotateY(0deg) translateZ(400px);
		}
		section div:nth-child(2) {
			transform: rotateY(60deg) translateZ(400px);
		}
		section div:nth-child(3) {
			transform: rotateY(120deg) translateZ(400px);
		}
		section div:nth-child(4) {
			transform: rotateY(180deg) translateZ(400px);
		}
		section div:nth-child(5) {
			transform: rotateY(240deg) translateZ(400px);
		}
		section div:nth-child(6) {
			transform: rotateY(300deg) translateZ(400px);
		}
		
       </style>
    </head>
    <body>
    <section>
   <!-- <img class="one" src="images/2000949.jpg"  alt=""> -->    
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
    </section>
    </body>
</html>